<script setup lang="ts">

import {ref, watch, reactive} from "vue"
import type {FormInstance, FormRules} from 'element-plus'

const emits = defineEmits(['update:show'])
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})
const ruleForm = reactive({
    num: '',
})
const rules = reactive<FormRules>({
    num: [
        {required: true, message: '请输入提现金额', trigger: 'blur'},
    ],
})
const ruleFormRef = ref<FormInstance>()
const isUp = ref(false)
const onSure = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
// 监听show
watch(() => props.show, (newVal) => {
    isUp.value = newVal
    if (newVal) {
        console.log('打开')
        ruleForm.num = '1'
        resetForm(ruleFormRef.value)
    } else {
        console.log('关闭')
    }
})

// 监听isUp
watch(isUp, (newVal) => {
    emits('update:show', newVal)
})
</script>

<template>
    <div>
        <el-dialog title="提现" width="450" append-to-body v-model="isUp">
            <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                @submit.native.prevent
                status-icon
            >
                <el-form-item label="提现金额" prop="num">
                    <el-input-number class="!w-full" :min="1" v-model="ruleForm.num" :controls="false"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="flex items-center justify-center">
                    <el-button @click="isUp = false">取消</el-button>
                    <el-button type="primary" @click="onSure(ruleFormRef)">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">

</style>